// 引入Three.js库
import * as THREE from "three";
// 引入GLTFLoader
// 新版本GLTFLoader位置，新版本的Three.js中，许多模块已经移动到了 jsm 目录下
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { AnimationAction } from "three/src/animation/AnimationAction";
import { AnimationMixer } from "three/src/animation/AnimationMixer";
import Stats from 'three/addons/libs/stats.module.js';


//定义变量
let container, stats, clock, mixer;//内容 侦测帧数工具 时钟  破放弃 
let camera, scene, renderer, model;//相机 场景 渲染器 模型 



/**
 * 初始化o
 */
const init = () => {
    //初始化内容
    container = document.createElement('div');
    document.body.appendChild(container);
    //初始化相机
    camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.25, 1000);
    // 位置x、y、z都大于0，视线指向坐标原点
    camera.position.set(1, 1, 20);
    camera.lookAt(0, 0, 0);
    //初始化场景
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xe0e0e0);
    scene.fog = new THREE.Fog(0xe0e0e0, 20, 100);

    //添加灯光到场景中
    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d, 2);//初始化灯光（半球光）
    hemiLight.position.set(0, 20, 10);//灯光位置
    scene.add(hemiLight);//场景添加灯光

    const dirLight = new THREE.DirectionalLight(0xffffff, 2);//初始化定向光
    dirLight.position.set(0, 20, 10);//定向光位置
    scene.add(dirLight);//添加定向光

    //辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);  

    const loader = new GLTFLoader();//初始化渲染器
    //渲染
    loader.load('/jinli/scene.gltf', function (gltf) {
        model = gltf.scene;//初始化模型 3dObject
        scene.add(model);
        loadAnimation(gltf.animations)
    }, undefined, function (e) {
        console.error(e);
    });

    renderer = new THREE.WebGLRenderer({ antialias: true });//初始化渲染器
    renderer.setPixelRatio(window.devicePixelRatio);//设置渲染器比例
    renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染器大小为屏幕宽高
    container.appendChild(renderer.domElement);//添加到内容

    //打印渲染器大小
    console.log(renderer.getSize(new THREE.Vector2()));
    // window.addEventListener('resize', onWindowResize);//监听窗口变化


    // stats
    stats = new Stats();//性能监视器
    container.appendChild(stats.dom);
}

// 加载动画
const loadAnimation = (animations) => {
    mixer = new THREE.AnimationMixer(model);//初始化播放器
    const action = mixer.clipAction(animations[0]);//初始化动画动作
    action
        .reset() //重置
        .setEffectiveTimeScale(1.5)//设置时间缩放，播放的快慢
        .setEffectiveWeight(1)//设置权重
        // .fadeIn(1)
        .play();//播放
};

// 声明一个对象keyStates用来记录键盘事件状态
const keyStates = {
    // 使用W、A、S、D按键来控制前、后、左、右运动
    // false表示没有按下，true表示按下状态
    W: false,
    A: false,
    S: false,
    D: false,
    Space: false
};
// 当某个键盘按下设置对应属性设置为true
document.addEventListener('keydown', (event) => {
    if (event.code === 'KeyW') keyStates.W = true;
    if (event.code === 'KeyA') keyStates.A = true;
    if (event.code === 'KeyS') keyStates.S = true;
    if (event.code === 'KeyD') keyStates.D = true;
    if (event.code === 'Space') keyStates.Space = true;
});
// 当某个键盘抬起设置对应属性设置为false
document.addEventListener('keyup', (event) => {
    if (event.code === 'KeyW') keyStates.W = false;
    if (event.code === 'KeyA') keyStates.A = false;
    if (event.code === 'KeyS') keyStates.S = false;
    if (event.code === 'KeyD') keyStates.D = false;
    if (event.code === 'Space') keyStates.Space = false;
});





function animate() {
    clock = new THREE.Clock();//初始化时钟
    const dt = clock.getDelta();//启用
    if (mixer) mixer.update(0.03);//更新模型动画

    requestAnimationFrame(animate);

    renderer.render(scene, camera);

    stats.update();

    //根据键盘状态改变模型
    if (keyStates.A) {
        model.rotateY(0.1)
    }
    if (keyStates.D) {
        model.rotateY(-0.1)
    }
    if (keyStates.W) {
        model.rotateZ(0.1)
    }
    if (keyStates.S) {
        model.rotateZ(-0.1)
    }
    if (keyStates.Space) {
        model.translateX(0.3)
        camera.position.x = model.position.x;
        camera.position.y = model.position.y;
    }

    console.log(1)

}


init()
animate()